<template>
  <div>
    <div class="grid-content bg-purple-dark">
        <div class="bg-purple-dark-content">
          <h1 class="bg-purple-dark-content-title">创建你的账户</h1>
          <el-form :label-position="labelPosition" label-width="20" :model="formLabelAlign" status-icon :rules="rules"
                   ref="formLabelAlign">
            <el-form-item label="昵称" prop="UserName" style="width: 310px" class="lbl">
              <el-input v-model="formLabelAlign.UserName"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件地址" prop="Email" style="width: 310px;" class="lbl">
              <el-input v-model="formLabelAlign.Mailbox"></el-input>
            </el-form-item>
            <el-form-item label="确认你的电子邮件地址" prop="ChEmail" style="width: 310px" class="lbl">
              <el-input v-model="formLabelAlign.ChEmail"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="Pwd" style="width: 310px" class="lbl">
              <el-input v-model="formLabelAlign.Password" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="CheckboxBool">
              <el-checkbox-group prop="CheckboxBool" v-model="formLabelAlign.CheckboxBool">
                <el-checkbox label="我已满18周岁并同意《Game协议》和《value隐私政策》的条款" name="type"
                             style="color: lightgray"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-button type="primary" @click="submitForm('formLabelAlign')" class="L_btn">继续</el-button>
          </el-form>
        </div>
      </div>
      <!--  验证邮箱通过后显示模态窗验证  验证码  -->
      <el-dialog title="验证邮箱验证码" :visible.sync="dialogVisible" width="30%" style="color:white" :close-on-click-modal="false">
        <span>
          <el-form :label-position="labelPosition" label-width="20" :model="formLabelAlign" status-icon :rules="rules"
                   ref="ReturnForm">
            <p style="color: white">请查看 {{ formLabelAlign.Mailbox }} 中来自 Steam 的电子邮件，以完成您的帐户设置.</p>
                <el-form-item label="邮箱验证码" prop="Code" style="width: 310px" class="lbl">
                  <el-input v-model="formLabelAlign.Code"></el-input>
                  <EmailCode style="position: absolute" :Emails="formLabelAlign.Mailbox" @obtainCode="EmailEvent"></EmailCode>
                </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="RegisterBtn('ReturnForm')">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import FormValidation from "../network/FormValidation";
import EmailCode from "../components/EmailCode";
import {request} from "../network/request";
export default {
  name: "New_register",
  components: {EmailCode},
  data() {
    //验证二次邮箱
    let validateCheckEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入邮件地址'));
      } else if (value !== this.formLabelAlign.Mailbox) {
        callback(new Error('两次邮件不一致'));
      } else {
        callback();
      }
    }
    return {
      labelPosition: 'top',
      dialogVisible: false,
      formLabelAlign: {
        Mailbox: '',
        ChEmail: '',
        UserName: '',
        UserPwd: '',
        Code: '',
        resultsCode:'',
        CheckboxBool: false
      },
      rules: {
        Mailbox: [{validator: FormValidation.ValidationEmail, trigger: 'blur'}],
        ChEmail: [{validator: validateCheckEmail, trigger: 'blur'}],
        CheckboxBool: [{validator: FormValidation.validateCheckboxBool, trigger: 'blur'}],
        UserName: [{validator: FormValidation.validateUserName, trigger: 'blur'}],
        Pwd: [{validator: FormValidation.ValidationPwd, trigger: 'blur'}],
        Code:[{validator: FormValidation.validateCode, trigger: 'blur'}]
      }
    };
  },
  methods: {
    //发送邮件
    submitForm(formLabelAlign) {
      this.$refs[formLabelAlign].validate((valid) => {
        if (valid) {
          //判断注册是否已经存在
          this.SendCode();
        }
      });
    },
    //注册
    RegisterBtn(formLabelAlign){
      this.$refs[formLabelAlign].validate((valid) => {

        if (valid) {
          console.log(this.formLabelAlign.resultsCode);
          console.log(this.formLabelAlign.Code);
          if (this.formLabelAlign.resultsCode === this.formLabelAlign.Code){
            //账号未注册，可以注册
            request({
              method:'Post',
              params:{userName:this.formLabelAlign.UserName,userPwd:this.formLabelAlign.Password,mailbox: this.formLabelAlign.Mailbox},
              url:`/api/Register/Post`
            }).then((relS)=>{
              console.log(rels);
              if(relS){
                this.$router.push('/');
              }
            }).catch(_=>{this.$message.error('注册失败！！！！！')});
            //清空验证码
            this.formLabelAlign.resultsCode = '';
          }else{
            this.$message({
              showClose: true,
              message: '邮箱验证码不正确',
              type: 'error'
            });
          }
        }
      });
    },
    //接受发送邮箱按钮子组件的验证码值
    EmailEvent(rel){
      console.log(rel)
      this.formLabelAlign.resultsCode =rel;
    },
    //发送邮箱验证码
    SendCode(){
      request({
        url:`/api/Register/ExistsPublisher?mailbox=${this.formLabelAlign.Mailbox}`,
        method:'post'
      }).then((rel)=>{
        if(rel.data){
          this.$message.error('该邮箱已经注册！！！');
        }else {
          this.dialogVisible = true;
        }
      }).catch(_=>{this.$message.error('注册失败！！！！！')})
    }
  }
}
</script>

<style scoped>

.bg-purple-dark {
  width: 100%;
  height: 919px;
  background-image: url("../assets/register.jpg")
}
.bg-purple-dark-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 700px;
}

.bg-purple-dark-content-title {
  color: white;
  padding: 20px 0;
}

.L_btn {
  width: 190px;
  height: 35px;
  margin: 10px 50px;
}
</style>
<style>
.lbl .el-form-item__label {
  color: white;
  font-size: 18px;
}
/*标题背景色*/
.el-dialog .el-dialog__header  {
  background: #1b2838;
}
.el-dialog .el-dialog__header .el-dialog__title{color: white}
/*body背景色*/
.el-dialog .el-dialog__body  {
  background-color: #1b2838;
}
/*body背景色*/
.el-dialog .el-dialog__footer  {
  background-color: #1b2838;
}
</style>
